<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="/dist/plugins/viewer/viewer.css">
    <style>
        .tp{
            visibility: hidden;
        }
        .viewer-prev,.viewer-next{
            display: none !important;
        }
    </style>
</head>
<body>
<ul id="images">
    <li><img src="" alt="Picture 1" class="tp"></li>

</ul>
<script src="/dist/plugins/jQuery/jquery-3.3.1.js"></script>
<script src="/dist/plugins/viewer/viewer.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>

<script>
    function getUrlParamObj() {
        var args = new Object();
        var query = location.href;
        var pairs = query.split("&"); //www.cxybl.com break at ampersand
        for (var i = 0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf('='); // look for "name=value"
            if (pos == -1) continue; // if not found, skip
            var argname = pairs[i].substring(0, pos); // extract the name
            var pos1 = argname.indexOf('?');
            if (pos1 > -1) {
                argname = argname.substring(pos1 + 1);
            }
            var value = pairs[i].substring(pos + 1); // extract the value
            value = decodeURIComponent(value); // decode it, if needed
            args[argname] = value; // store as a property
        }
        var ss = args.valueOf(0);
        obj = args;
        return args; // return the object www.cxybl.com
    }
</script>
<script>
    var api = frameElement.api, W = api.opener;
    $(".tp").attr("src",getUrlParamObj().url);
    $('#images').viewer({
        hide: function (e) {
            api.close();
        }
    });
    console.log($('.tp'))
    setTimeout(function () {
        $('.tp').trigger("click");
    },800)
</script>
</body>
</html>